<template>
  <div class="api-left">
    <ul class="api-left_ul">
      <li class="api-left_li" v-for="(item,index) in arrList" :key="index">
        <div class="api-menu1">
          <div class="menu1-icon1" :class="{'menu1-icon1_active':item.isEnable==true}" @click="iconTab(index)"><i class="el-icon-caret-right"></i></div>
          <div class="menu1-icon2" @click="iconTab(index)">
            <i class="el-icon-folder" v-if="item.isEnable==false"></i>
            <i class="el-icon-folder-opened" v-else></i>
          </div>
          <div class="menu1-text" @click="menuTab(item)">{{item.name}}</div>
        </div>
        <ul class="api-menu2" v-if="item.isEnable">
          <li class="api-menu2_li" v-for="(cItem,cIndex) in item.children" :key="cIndex">
            <div class="menu2_li-ask ask_1" v-if="cItem.type=='GET'">GET</div>
            <div class="menu2_li-ask ask_2" v-else-if="cItem.type=='POST'">POST</div>
            <div class="menu2_li-ask ask_3" v-else-if="cItem.type=='PUT'">PUT</div>
            <div class="menu2_li-ask ask_4" v-else-if="cItem.type=='DELETE'">DELETE</div>
            <div class="menu2_li-text" @click="menuTab(cItem)">{{cItem.name}}</div>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>
<script>
  import ala from '@/service/ala'
  import menuJson from './menu.json'
  export default {
    data () {
      return {
        arrList: menuJson,
        viewModel: null
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      async init () {
        var repones = await ala.httpGet('api/type/GetKeyValue?type=IAutoForm')
      },
      async iconTab (vIndex) {
        this.$set(this.arrList[vIndex], 'isEnable', !this.arrList[vIndex].isEnable)
      },
      async menuTab (val) {

      }
    }
  }
</script>
<style lang="scss">
  @import "./api-left.scss";
</style>